import React, { Component } from 'react'
import { Card, Form, Input, Checkbox, Button, message } from 'antd'
import styles from './index.module.scss'
import logo from 'assets/logo.png'
import { loginAPI } from 'api/login'
import { saveToken } from 'utils/storage'
export default class Login extends Component {
    // 点击登录
    onFinish = async (values) => {
        try {
            const res = await loginAPI(values)
            saveToken(res.data.token)
            this.props.history.push('/')
            message.success('登录成功', 1)
            console.log(res);
        } catch (err) {
            message.error(err.response.data.message, 1)
        }
    }

    render() {
        return (
            <div className={styles.login}>
                <Card className='login-container'>
                    <img className='login-logo' src={logo} alt="极客园" />
                    <Form
                        size="large"
                        onFinish={this.onFinish}
                        initialValues={{
                            agree: true,
                            mobile: '13811111111',
                            code: '246810',
                        }}
                    >
                        <Form.Item name='mobile'
                            rules={[
                                { required: true, message: '手机号不能为空' },
                                { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误' }
                            ]}
                        >
                            <Input placeholder="请输入手机号码" />
                        </Form.Item>

                        <Form.Item name='code'
                            rules={[
                                { required: true, message: '验证码不能为空' },
                                { pattern: /^\d{6}$/, message: '验证码格式错误' },
                            ]}
                        >
                            <Input.Password placeholder="密码" />
                        </Form.Item>

                        <Form.Item
                            name='agree'
                            valuePropName='checked'
                            rules={[
                                { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意用户协议') }
                            ]}
                        >
                            <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
                        </Form.Item>

                        <Form.Item>
                            <Button block type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div >
        )
    }
}
